<template>
    <div>
        <div class="QaUserInfo">
            <user-info-list :list="userList" @removeInfo="deleteInfo" @editInfo="editInfo"></user-info-list>
            <div class="submitBtn">
                <van-button
                        color="#85B214"
                        size="small"
                        icon="plus"
                        @click="addUserInfo"
                >
                    添加信息
                </van-button>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
            <van-nav-bar
                    :title="navTitle"
                    left-arrow
                    fixed
                    @click-left="onClickLeft"
            >
            </van-nav-bar>
            <dynamic-form :form-el="formEl"></dynamic-form>
            <div class="SubmitBtnNoBg">
                <van-button round block type="info" native-type="submit" @click="submitForm">
                    确定
                </van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import UserInfoList from "../../common/UserInfoList";
import DynamicForm from '../../d-form/DynamicForm';
export default {
    name: "QaUserInfo",
    components: {DynamicForm, UserInfoList},
    data () {
        return {
            show: false,
            operate:'add',
            navTitle:'添加用户信息',
            editIndex: 0,
            userList: [{
                userName: '张三',
                action: '新增权限',
                tagColor: '#1099E5',/*这个是标签上的颜色，四个标签对应四个色值*/
                company: '小土豆软件有限公司'
            }, {
                userName: '李四',
                action: '新建用户',
                tagColor: '#85B214',
                company: '小土豆软件有限公司'
            }, {
                userName: '王五',
                action: '删除用户',
                tagColor: '#F66516',
                company: '小土豆软件有限公司'
            }, {
                userName: '赵六',
                action: '删除权限',
                tagColor: '#F2AD08',
                company: '小土豆软件有限公司'
            }],
            formEl: [{
                items: [{
                    "type": "select", //表单项类型
                    "key": "userName",  //表单项的id、name
                    "label": "类型", //标签
                    "class": "",   //样式
                    "initValFeedType": "",//初始值获取方式none无,function 执行js函数,request 使用ajax请求
                    "initValFeedTypeText": [{"key": 1, "label": "新增权限"},{"key": 2, "label": "新建用户"},{"key": 3, "label": "删除用户"},{"key": 4, "label": "删除权限"}], //与initValFeedType配合使用， function时为js脚本，ajax请求时为地址、参数信息
                    "value": "",  //表单项的值
                    "showVal":"",
                    "placeholder":"请选择",
                    "readonly": false,
                    "disabled": false,
                    "required": true,
                    "validate":function(item){
                        alert(item)``
                    },
                    "options": {}//其他附加项。如添加事件处理等
                }, {
                    "type": "text",
                    "key": "password",
                    "label": "单位名称",
                    "class": "",
                    "initValFeedType": "",//none,function,request
                    "initValFeedTypeText": "",
                    "value": "神州数码融信软件有限公司",
                    "showVal":"",
                    "placeholder":"请输入公司名称",
                    "disabled": false,
                    "required": true,
                    "validate":null,
                    "options": {}
                }, {
                    "type": "text",
                    "key": "pjName",
                    "label": "姓名",
                    "class": "",
                    "initValFeedType": "",//none,function,request
                    "initValFeedTypeText": "",
                    "value": "张三丰",
                    "showVal":"",
                    "placeholder":"请输入用户名",
                    "disabled": false,
                    "required": true,
                    "validate":null,
                    "options": {}
                }, {
                    "type": "text",
                    "key": "pjName0",
                    "label": "CC/SVN用户名",
                    "class": "",
                    "initValFeedType": "",//none,function,request
                    "initValFeedTypeText": "",
                    "value": "由项目级配置管理员填写",
                    "showVal":"",
                    "disabled": true,
                    "required": false,
                    "validate":null,
                    "options": {}
                }, {
                    "type": "text",
                    "key": "pjName1",
                    "label": "加入组",
                    "class": "",
                    "initValFeedType": "",//none,function,request
                    "initValFeedTypeText": "",
                    "value": "由项目级配置管理员填写",
                    "showVal":"",
                    "disabled": true,
                    "required": false,
                    "validate":null,
                    "options": {}
                }, {
                    "type": "text",
                    "key": "pjName2",
                    "label": "离开组",
                    "class": "",
                    "initValFeedType": "",//none,function,request
                    "initValFeedTypeText": "",
                    "value": "由项目级配置管理员填写",
                    "showVal":"",
                    "disabled": true,
                    "required": false,
                    "validate":null,
                    "options": {}
                }, ]
            }]
        }
    },
    methods: {
        addUserInfo () {
          this.operate='add';
          this.navTitle='添加用户信息';
          this.show=true;
            for(let item of this.formEl) {
                for(let o of item.items) {
                    if(o.label==='类型'||o.label==='单位名称'||o.label==='姓名'){
                        o.value = '';
                        o.showVal ='';
                    }
                }
            }
        },
        onClickLeft () {
            this.show=false;
        },
        deleteInfo(index) {
            this.userList.splice(index,1)
        },
        editInfo(name,action,company,index) {
            this.operate='edit';
            this.navTitle='编辑用户信息';
            this.show=true;
            this.editIndex=index;
            for(let item of this.formEl){
                for(let o of item.items){
                    switch (o.label) {
                        case '类型' :
                            o.showVal = action;
                            break;
                        case '单位名称' :
                            o.value = company;
                            break;
                        case '姓名' :
                            o.value = name;
                            break;
                    }
                }
            }
        },
        submitForm () {
            let name,action,color,company,userInfo;
            for(let item of this.formEl){
                for(let o of item.items){
                    switch (o.label) {
                        case '类型' :
                            action = o.showVal;
                            break;
                        case '单位名称' :
                            company = o.value;
                            break;
                        case '姓名' :
                            name = o.value;
                            break;
                    }
                    /*选择不同操作给其不同标签颜色*/
                    switch (o.showVal) {
                        case '新增权限':
                            color = '#1099E5';
                            break;
                        case '新建用户':
                            color = '#85B214';
                            break;
                        case '删除用户':
                            color = '#F66516';
                            break;
                        case '删除权限':
                            color = '#F2AD08';
                            break;
                    }
                }
            }
            userInfo = {
                userName: name,
                action: action,
                tagColor: color,
                company: company
            };
            if(this.operate === 'add'){
                this.userList.push(userInfo);
            } else if(this.operate === 'edit'){
                this.userList.splice(this.editIndex,1,userInfo);
            }
            this.show=false;
        },
    }
}
</script>

<style scoped>

</style>
